<template>
  <div id="app">
    <!-- 准备具有宽高的容器 -->
    <div style="width: 300px; height: 300px" ref="chart"></div>
  </div>
</template>

<script>
import { chartDataStatistics } from '@/api/find.js'

const Echarts = require('echarts/lib/echarts') // 基础实例 注意不要使用import
require('echarts/lib/chart/bar') // 按需引入 bar = 柱状图

export default {
  data () {
    return {
      chart: null
    }
  }, // 图表实例
  mounted () {
    this.init()
    this.getData()
  },
  methods: {
    init () {
      // 2.初始化
      this.chart = Echarts.init(this.$refs.chart)
      // 3.配置数据
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,

            labelLine: {
              show: false
            },
            data: [
              { value: 0.6 },
              { value: 1.4 },
              { value: 3.1 },
              { value: 20.9 },
              { value: 22.7 }
            ]
          }
        ]
      }
      // 4.传入数据
      this.chart.setOption(option)
      // console.log(this.$refs)
    },
    async getData () {
      const res = await chartDataStatistics()
      console.log(res)
    }
  }
}
</script>
<style></style>
